查看原文
其他

15个 Cocos Creator 技术解决方案免费开源!更多资源持续更新中…

COCOS COCOS 2022-06-10

期望的游戏效果不知该如何实现?被繁琐的操作劝退?想要提升开发效率?应广大开发者的需求,Cocos 技术支持团队将持续为大家整理提供一些实用的技术解决方案,通通免费开源!


这些方案部分来自 Cocos 引擎开发团队、技术支持团队,更多的则是源于社区开发者、GitHub、Gitee 用户的创作,感谢大家的支持与分享!官方技术支持团队将持续整合优化,并随着 Cocos Creator 更新迭代,确保方案在新版引擎中可运行。


本文为大家盘点了近期的15个优质技术方案,每个方案的详细介绍和使用说明请至相应的代码仓库查看。


动画指定帧播放

骨骼动画

龙骨动画

Spine 动画


基于 v3.4 实现的骨骼/龙骨/Spine 动画指定帧播放工程,由技术支持团队提供。


  • 工程仓库:

骨骼动画丨https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_3D_SkeletalAnimationSpecifiedFrame

龙骨动画丨https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_DragonBonesSpecifiedFrame

Spine 动画丨https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_SpineSpecifiedFrame


四叉树碰撞优化

四叉树碰撞检测优化由 GitHub 用户「xjz1994」提供开源方案,技术支持团队升级至 v3.4.1。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.1_2D_QuadtreeCollision

  • Demo 来自:

https://github.com/xjz1994/Collision


3D 模型切割

此方案受 GitHub 上的开源方案「mesh-cutter」所启发,技术支持团队使用 TypeScript 在 v3.4.0 上实现了相似功能。使用注意事项详见仓库,团队将持续更新优化、增加更多功能。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_3D_MeshCutter

  • 素材来自:

https://sketchfab.com/


自定义形状遮罩

在 v3.4 中实现自定义形状遮罩,由 GitHub 用户kirikayakazuto提供、技术支持团队升级。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_Mask_Polygon

  • 素材来自:

https://github.com/kirikayakazuto/CocosCreator_UIFrameWork/tree/SplitTexture


Tween 贝塞尔运动和运动变速

由技术支持团队带来的 Tween 执行贝塞尔运动以及运动变速工程,支持 v3.4.1。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_GameTimeScale

  • 素材来自:

https://sketchfab.com/


3D 植被卡通渲染与植被交互

塞尔达风格的 3D 植被卡通渲染工程,由引擎开发团队提供、技术支持团队升级至 v3.3.1(点击查看教程详解)


  • 工程仓库:

https://github.com/cocos/cocos-example-cartoon-vegetation

  • 素材来自:

https://gitee.com/mirrors_cocos-creator/cartoon-vegetation


原生App内主动切换横竖屏

支持全平台的屏幕旋转实现方案,由社区开发者「tuyazuo」提供、技术支持团队升级至 v3.4.0。需要注意的是 v3.0.0-v3.4.1 在 iOS 调用原生转屏功能后,点击位置会发生偏移,需要手动合并,Demo 中有附带合并 pr 后的文件。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_ScreenSwitch

  • Demo 来自:

https://forum.cocos.org/t/topic/79780


区域截图、截图保存

由技术支持团队提供的区域截图、截图保存方案,基于 v3.4 创建。目前引擎还不支持 jsb.saveImageData,计划在 v3.5 提供支持 。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_PartialScreenshot


画板

基于 v3.3.2 的画板方案工程,目前已实现绘画、橡皮擦、清屏、回退、画布替换、截图并保存截图(Web)、渐变色画笔等功能。由 Gitee 用户「skyxu123 随风」提供、技术支持团队补充功能。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/main/demo/Creator3.3.2_2D_DrawingBoard

  • 素材来自:

https://gitee.com/skyxu123/drawing-board

http://www.yini.org/liuyan/rgbcolor.htm


图片分割

简单易用的图片分割工程,支持 Web、iOS、Android、Windows、微信小游戏等平台。由 Github 用户「kirikayakazuto」提供、技术支持团队升级至 v3.3.2。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/main/demo/Creator3.3.2_2D_SpriteSplit

  • 素材来自:

https://github.com/kirikayakazuto/CocosCreator_UIFrameWork/tree/SplitTexture/assets/Script/test

https://forum.cocos.org/t/topic/103699


Gif 图片资源加载

基于 v3.3.2 创建的 Gif 图片资源加载工程,支持多平台。由 Github 用户「shachaf、baibai2013、newGy、2van、waiter」提供、技术支持团队升级。


  • 工程仓库:

https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/main/demo/Creator3.3.2_2D_Light

  • 素材来自:

https://github.com/shachaf/jsgif
https://github.com/baibai2013/cocos-creator-gifLib
https://github.com/newGy/cocos-creator-gif-2.4.4
https://github.com/2van/cocos-creator-gif
https://github.com/waiter/Cocos-GIF


防沉迷实名认证接入

基于 v3.4 创建的实名认证测试工程,接入了实名认证、实名认证查询、数据上报等功能。Github 用户「zihuyishi」提供了 SDK,技术支持团队进行了接入调试、实名认证客户端制作以及文档撰写。


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_RealNameAuthentication

  • 素材来自:

https://github.com/zihuyishi/realname-nppa-java-demo

http://www.uustory.com/?p=2419


2D 光照

基于 v3.3.2 创建的 2D 动态光照 Demo,由技术支持团队提供(点击查看教程详解)


  • 工程仓库:

https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/main/demo/Creator3.3.2_2D_Light

  • 素材来自:

https://www.codeandweb.com/blog/2015/05/12/lighting-demo-cocos2d-x

https://github.com/CodeAndWeb/cocos2d-x-dynamic-lighting


2D 阴影

在 v3.3.2 中实了现基于 2D 点光源的动态阴影,且对不透明像素做了阴影处理、光源和阴影的边缘做了柔和处理,由技术支持团队提供(点击查看教程详解)


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/main/demo/Creator3.3.2_2D_ShadowMap

  • 素材来自:

https://github.com/mattdesl/lwjgl-basics/wiki/2D-Pixel-Perfect-Shadows


2D 流体

动态 2D 流体解决方案,由 Github 用户「caogtaa」提供、技术支持团队升级至 v3.3.2(点击查看教程详解)


  • 工程仓库:

https://github.com/cocos/cocos-awesome-tech-solutions/tree/main/demo/Creator3.3.2_2D_Fluids

  • 素材来自:

https://github.com/caogtaa/CCTricks/tree/caogtaa/20200709_metaballs




点击文末【阅读原文】至 Cocos 论坛专贴查看更多技术解决方案,如果你有什么建议或疑问,都可以在帖子里留言。


再次感谢和我们分享技术方案的开发者!如果你也有技术干货、尝试过某些效果实现、或是有想要和我们分享的东西,不妨来参加「社区第4期征稿活动」尽情地展示自己吧(PS. 还有丰厚大礼哦)!


点击参与社区征稿


福利时间

转发/分享本篇文章,并在本文评论区告诉我们「你最想了解哪类技术解决方案」,说不定就会被写进技术支持团队的 list 里。4月6日,我们将从评论区抽选3小伙伴,送出 Cocos 周边大礼包1份!


往期精彩

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存